<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>uploader hmtl5上传组件</title>
    <link href="css/uploader.css" rel="stylesheet">
    <style type="text/css">
        body { font-size: 12px; }
        .upl { clear: both; }
        .upl p { width: 100px; height: 100px; line-height: 100px; text-align: center; float: left; margin-right: 15px; background-color: #fff; border-radius: 3px; border: 1px solid #ccc; }
        .upl img { max-width: 80px; max-height: 80px; vertical-align: middle; }
        .selfile { margin-bottom: 10px; }
    </style>
</head>
<body>
    <div style="width: 600px; margin: 0 auto;">
        <p>默认样式：</p>
        <div id="onlyup"></div>
        <div class="upl" id="one"></div>
        <div style="clear: both; padding:10px 0;"></div>
        <p>自定义样式（可以根据业务场景设计不同样式）：</p>
        <div id="uploader"><span class="btn_up selfile">选择图片</span></div>
        <div class="upl" id="two"></div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" ></script>
    <script src="js/uploader.1.2.js" ></script>
    <script type="text/javascript">
        $(function(){
            //默认示例
            $.uploader({
                upBox   : $('#onlyup'),
                upUrl   : 'upload.php',
                maxSize : 1024*1024,
                allowExt: '.jpg,.jpeg,.png,.gif,.bmp',
                onBeforeGetFiles : function(selNum, waitNum, upNum) {
                    
                },
                onSuccess  : function(file, response) {
                    //当有文件上传成功后触发
                    $('#one').append('<p><img src="/uploads/'+response+'" ></p>');
                },
                onFailure  : function(file, response) {
                    //当有文件上传失败后触发
                }
            });

            /*
                自定义样式一（按钮）
                注意此时需要把点击触发选择文件的样式类加上 selfile，如想点击span标签触发选择文件，就要这样写<span class="selfile"></span>

                初始触发是图片也是同理
                想去掉默认预览样式，只需传入 onPreview 函数
             */
            $.uploader({
                upBox   : $('#uploader'),
                upUrl   : 'upload.php',
                maxSize : 1024*1024,
                skin    : 2,
                auto    : true,
                allowExt: '.jpg,.jpeg,.png,.gif,.bmp',
                onBeforeGetFiles : function(selNum, waitNum, upNum) {
                    
                },
                onPreview : function(file, img) { 
                    //自定义预览，如果你不想要预览，这里可以什么都不写
                },
                onSuccess  : function(file, response) {
                    //当有文件上传成功后触发
                    $('#two').append('<p><img src="/uploads/'+response+'" ></p>');
                },
                onFailure  : function(file, response) {
                    //当有文件上传失败后触发
                }
            });


        });
    </script>
</body>
</html>